{extend name="public/base" /}
{block name="body"}
<body class="hold-transition skin-purple sidebar-mini">

<!-- 新增模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" style="top:5%;" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">新增生产</h4>
      </div>
      <form id="addForm" method="post">
        <div class="modal-body" style="height: 100%;text-align: center;">
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">产品名称</label>
            <div class="col-sm-9">
              <select class="form-control" name="gID">
                {volist name="gID_list" id="gItem"}
                <option value="{$gItem.gID}">{$gItem.gName}</option>
                {/volist}
              </select>
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">生产数量</label>
            <div class="col-sm-9">
              <input id="add_gNum" type="number" name="gNum" class="form-control" maxlength="11" autoComplete="off"
                     oninput="if(value<0)value=0" min="0"
              >
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">定价</label>
            <div class="col-sm-9">
              <input id="add_gPrice" type="number" step="0.5" name="gPrice" class="form-control" maxlength="8" autoComplete="off"
                     oninput="if(value<0)value=0; if(value>999.99) value=999.99" min="0" max="999.99"
              >
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">生产地点</label>
            <div class="col-sm-9">
              <input id="add_gPlace" type="text" name="gPlace" class="form-control" maxlength="10" autoComplete="off">
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">生产日期</label>
            <div class="col-sm-9">
              <a class='input-group date' id='datetimepicker1'>
                <input type='text' name="gDate" class="form-control" id='nowdate' style="width: 150px; height: 30px;" />
                <span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
              </a>
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">生产加工</label>
            <div class="col-sm-9">
              <input id="add_gProcess" type="text" name="gProcess" class="form-control" maxlength="10" autoComplete="off">
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">原材料</label>
            <div class="col-sm-9">
              <input id="add_gMaterial" type="text" name="gMaterial" class="form-control" maxlength="10" autoComplete="off">
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">产品质量</label>
            <div class="col-sm-9" style="width: 100px;">
              <select name="gQuality" class="form-control">
                <option value="优">优</option>
                <option value="良">良</option>
                <option value="中">中</option>
                <option value="可">可</option>
                <option value="差">差</option>
              </select>
            </div>
          </div>
          <div class="form-group" style=" height: 40px;">
            <label for="firstname" style="height:34px; padding-top:1.2%;" class="col-sm-2 control-label">产品等级</label>
            <div class="col-sm-9" style="width: 100px;">
              <select name="gGrade" class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
              </select>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary" id="btnAdd">保存</button>
          <button type="button" class="btn btn-default" data-dismiss="modal" onclick="reloadPage()">关闭</button>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /新增模态框 -->

<!-- 显示图片模态框 -->
<div class="modal fade" id="bigImgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" style="top:20%;left: 5%;" role="document">
    <div class="modal-content" style="width: 410px;padding: 0 10px;">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body" style="height: 100%;width: 100%;text-align: center;">
        <div style="width: 360px;height: 350px;">
          <img id="bigImg" src="" alt="暂无" style="width: 100%;height: 100%;">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
<!-- /显示图片模态框 -->

<div class="wrapper">

  <!-- 内容区域 -->
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        生产管理
        <small>Produce Tables</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="home.html"><i class="fa fa-dashboard"></i>主页</a></li>
        <li><a href="#">系统管理</a></li>
        <li class="active">生产管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      <!-- .box-body -->
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">全部生产</h3>
        </div>

        <div class="box-body">
          <!-- 数据表格 -->
          <div class="table-box">
            <!-- 表格工具栏 -->
            <div id="toolbar"><div class="btn-group">
              <button type="button" onclick="btnAdd()" class="btn btn-default" title="新建"><i class="fa fa-file-o"></i> 新建</button>
              <button type="button" id="btn-delete" onclick="delList()" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
            </div>
            </div>
            <!--数据列表-->
            <table id="dataList" class="table table-hover table-striped table-bordered"
                   data-search-highlight="true"
                   data-show-pagination-switch="true"
                   data-show-search-button="true"
                   data-show-search-clear-button="true"
                   data-sort-name="pID"
                   data-total-field="count"
                   data-toolbar="#toolbar"
            >
            </table>
            <!--数据列表/-->
          </div>
          <!-- 数据表格 /-->

        </div>
        <!-- /.box-body -->
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- page script -->
  <!-- 内容区域 /-->


</div>

<!-- 引入js依赖 -->
{include file="public/introduce" /}

<script>

  $(document).ready(function() {
    // 选择框
    $(".select2").select2();

    // WYSIHTML5编辑器
    $(".textarea").wysihtml5({
      locale: 'zh-CN'
    });
  });


  // 设置激活菜单
  function setSidebarActive(tagUri) {
    var liObj = $("#" + tagUri);
    if (liObj.length > 0) {
      liObj.parent().parent().addClass("active");
      liObj.addClass("active");
    }
  }


  // 激活导航位置
  setSidebarActive("admin-produce");

  var $table = $('#dataList');

  /* 表格开始 */
  $(function() {
    // 列表按钮
    $("#dataList td input[type='checkbox']").iCheck({
      checkboxClass: 'icheckbox_square-blue',
      increaseArea: '20%'
    });
    //表头
    var tableColumns = [
              {checkbox: true},
              {field:'pID', title:'生产编号', sortable: true, width:10},
              {field:'gID', title:'产品编号', sortable: true, width:10},
              {field:'gName', title:'产品名称', sortable: true, width:10,
                cellStyle: formatTableUnit,
                formatter: paramsMatter,},
              {
                title: '产品图片',
                field: 'gImg',
                cellStyle: function (value, row, index) {
                  return {
                    css: {
                      "text-align": "center",
                      "height": "100%",
                      "width": "120px"
                    }
                  }
                },
                formatter : function (value, row, index) {
                  // __PUBLIC__ 会报错
                  //  __STATIC__/../ => public 文件夹
                  var img_src = "__STATIC__/../uploads/goodsImg/"+value;
                  return "<a href='#' onclick='bigImgClick("+index+")'><img style='width: 110px;height: 80px;' src='"+img_src+"' alt='暂无图片'></a>"
                }
              },
              {field:'gNum', title:'生产数量', sortable: true},
              {field:'gPrice', title:'定价', sortable: true},
              {field:'gPlace', title:'生产地点',sortable: true,
                cellStyle: formatTableUnit,
                formatter: paramsMatter,},
              {field:'gDate', title:'生产日期', sortable: true},
              {field:'gProcess', title:'生产加工', sortable: true},
              {field:'gMaterial', title:'原材料',sortable: true,
                cellStyle: formatTableUnit,
                formatter: paramsMatter,},
              {field:'gQuality', title:'产品质量', sortable: true},
              {field:'gGrade', title:'产品等级', sortable: true},
              {field:'cOpinion', title:'村镇意见', formatter: dataMatter},
              {field:'cVerify', title:'县市审核', sortable: true, formatter: dataMatter},
            ];
    /* td内容转换 */
    function dataMatter(value){
      var val = value;
      var span ;
      if(val == 1){
        span = "<span class=\"label label-success\">Approved</span>"
      }else if (val == 2){
        span = "<span class=\"label label-warning\">Pending</span>"
      }else{
        span = "<span class=\"label label-danger\">Denied</span>";
      }
      return span;
    }

    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index) {

      var span = document.createElement("span");
      span.setAttribute("title", value);
      span.innerHTML = value;

      return span.outerHTML;
    }
    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
      return {
        css: {
          "white-space": "nowrap",
          "text-overflow": "ellipsis",
          "overflow": "hidden",
          "max-width": "60px"
        }
      }
    }


    /** 表格赋值 **/
    $table.bootstrapTable({

      method: 'post',
      url: "../company/getProduceDataList", // 请求路径
      striped: true, // 是否显示行间隔色
      pageNumber: 1, // 初始化加载第一页
      pagination: true, // 是否分页
      search: true, //搜索
      showRefresh: true, //搜索处刷新
      clickToSelect: true, //是否启用点击一行任意位置选中该行
      sortOrder: "desc",     //排序方式
      sidePagination: 'client', // server:服务器端分页|client：前端分页
      pageSize: 5, // 单页记录数
      pageList: [5, 10, 15],

      queryParams: function(params) { // 上传服务器的参数
        var temp = {
          name: $("#sname").val(),
          viewReason: $("#viewReason").val(),
        };
        return temp;

      },

      columns: tableColumns,


    })

  });
  /* 表格完 */

  /* 点击唤起新增模态框 */
  function btnAdd(){
    $('#addModal').modal();
    Datetime();
  }

  /* 设置日期时间控件 */
  function Datetime() {
    $('#datetimepicker1').datetimepicker({
      language: 'zh-CN',//显示中文
      format: 'yyyy-mm-dd',//显示格式
      minView: "month",//设置只显示到月份
      initialDate: new Date(),
      autoclose: true,//选中自动关闭
      todayBtn: true,//显示今日按钮
      locale: moment.locale('zh-cn')
    });
    //默认获取当前日期
    var today = new Date();
    var nowdate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();
    //对日期格式进行处理
    var date = new Date(nowdate);
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);
    document.getElementById("nowdate").value = mydate;
  }

  /* 表单字段验证 */
  $('#addForm').bootstrapValidator({
    excluded: [":disabled", ":hidden", ":not(:visible)"], //不验证的情况
    message: '表单校验',
    /**
     * 生效规则（三选一）
     * enabled 字段值有变化就触发验证
     * disabled,submitted 当点击提交时验证并展示错误信息
     */
    live: 'enabled',
    /* button type为submit时无需额外绑定 */
    //验证字段以及规则
    fields: {

      gNum: {
        message: "gNum字段校验",
        trigger: "change",
        validators: {
          notEmpty: {
            message: '生产数量不能为空'
          }
        }
      },
      gPrice: {
        message: "gPrice字段校验",
        trigger: "change",
        validators: {
          notEmpty: {
            message: '定价不能为空'
          }
        }
      },
      gPlace: {
        message: "gPlace字段校验",
        trigger: "change",
        validators: {
          notEmpty: {
            message: '生产地点不能为空'
          }
        }
      },
      gDate: {
        message: "gDate字段校验",
        trigger: "change",
        validators: {
          notEmpty: {
            message: '生产日期不能为空'
          }
        }
      },
      gProcess: {
        message: "gProcess字段校验",
        trigger: "change",
        validators: {
          notEmpty: {
            message: '生产加工不能为空'
          }
        }
      },
      gMaterial: {
        message: "gMaterial字段校验",
        trigger: "change",
        validators: {
          notEmpty: {
            message: '原材料不能为空'
          }
        }
      }

    }
  }).on("success.form.bv",function (e){ //验证成功后提交表单
    $.ajax({
      url: "../company/addProduce",
      type: "post",
      async: false,
      data: $('#addForm').serialize(),
    });
  });

  /* 选中后点击删除按钮 */
  function delList(){
    if (!confirm("是否确认删除？"))
      return;
    var rows = $table.bootstrapTable('getSelections');// 获得要删除的数据
    if(rows.length == 0){
      alert("请选择需要删除的数据");
      return;
    }else{
      var ids = new Array();  // 声明一个数组
      $(rows).each(function() {  // 遍历选中行
        ids.push(this.pID);  // gID为获得到的整条数据中的一列，将其放入数组中
      });
      deleteMs(ids); //调用删除操作函数
    }
  }
  /* 进行删除操作的函数 */
  function deleteMs(ids){
    $.ajax({
      url: "../company/doProduceDelete",
      type: "post",
      data: "ids="+ids,
      dataType: "json",
      async: false,
      success: function(result) { //刷新表格
        $table.bootstrapTable('refresh', {
          url : '../company/getProduceDataList'
        });
      }
    })
  }

  /* 显示大图 */
  function bigImgClick(index){
    var row = $table.bootstrapTable('getData')[index];
    $('#bigImg').attr('src',"__STATIC__/../uploads/goodsImg/"+row.gImg);
    $('#bigImgModal').modal();
  }

  /* 刷新界面 */
  function reloadPage(){
    location.reload();
  }

</script>
</body>

</html>
<!---->

{/block}